<template>
  <div class="content">
    <div class="box">
      <!--左侧-->
      <div class="topic-box">
        <div class="path-wrap txtOf hLh30">
          <a class="c-999 fsize14" href="/">首页</a> /
          <a class="c-999 fsize14" href="/article">图文</a> /
          <a class="c-999 fsize14" href="javascript:void(0)">{{article.title}}</a>
        </div>

        <div class="topic">
          <div class="topic-title">{{article.title}}</div>
          <div class="topic-stat">
            <span class="div-times">{{article.timeDiffS}}</span>
            <span class="div-times">{{article.viewCount}}次阅读</span>
            <span class="div-times">{{article.voteCount}}人赞过</span>
          </div>
          <div class="line"></div>

          <div class="topic-content">
            <div class="u-content md-content" :class="!article.isBuy && article.price >0?'hidden-article':''">
              <vue-markdown v-if="article.markdown" id="markdown" :source="article.content"
                            ></vue-markdown>
              <div v-else v-html="article.content"></div>


            </div>
            <div v-if="!article.isBuy && article.price >0" class="try-end-fold-page" style="min-height: 262px;margin-top: -575px;">
              <div class="lock-content">
                <i class="el-icon-lock lock-icon"></i>
                <a class="lock-text" @click="toPay()">
                  订购课程 解锁全文
                </a>
              </div>

            </div>
            </div>

          </div>
          <!-- /评论 开始 html不支持驼峰 -->
          <y-comment-block :fromData="fromCommentData"/>
        </div>

        <div class="share-box">
          <div class="share">
            <span>分享到</span>
            <a style="margin-right: 26px;"
               :href="qqShareUrl">
              <img width="40" height="40"
                   src=""
                   class="qq-icon">
            </a>

            <a
              :href="weiboShareUrl">
              <img width="40" height="40"
                   src=""
                   class="sina-icon">
            </a>
          </div>

          <div :class="['vote-button',{'dz-end':isLick}]" @click="isLick=!isLick">
            <!-- <i style="font-size: 35px;" class="el-icon-thumb"></i>-->
            <em class="icon35 dzIcon"></em>
            <span>点赞</span>
          </div>

          <div :class="['like-button',{'sc-end':isCollect}]" @click="isCollect=!isCollect">
            <!--<i style="font-size: 35px;" class="el-icon-star-off"></i>-->
            <em class="icon35 scIcon-plus"></em>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <Backtop></Backtop>
    </div>
</template>

<script>
  import articleApi from "@/api/articleApi";
  import commonUtil from "@/utils/commonUtil";
  import YCommentBlock from '@/components/commentBlock'
  import order from '@/api/order'
  import Backtop from '~/components/Backtop'

  //todo VueMarkdown换成mavonEditor 使用markdown-it解析md语法
  export default {
    data() {
      return {
        articleId: this.$route.params.id,
        article: {},
        fromCommentData: {
          page: 1,
          limit: 4,
          targetType: this.$enum.COURSE_TYPE.ARTICLE.value,//业务类型 1course 2vod 3article
          targetId: this.$route.params.id,
          teacherId: ""
        },
        qqShareUrl: '',
        weiboShareUrl: '',
        isLick: false,
        isCollect: false,
        isBuy:false
      }
    }, components: {
      YCommentBlock,
      Backtop
    }, head() {
      return {
        title: `${this.article.title || '加载中...'}`,
        meta: [
          {hid: 'keywords', name: 'keywords', content: this.article.title},
          {hid: 'description', name: 'description', content: this.article.articleDesc}
        ]
      }
    }, computed: {
      articleDesc() {
        return this.article.substring(0, 20);
      }
    }, mounted() {
      this.getData()
    }, methods: {
      getData() {
        articleApi.getById(this.articleId).then(res => {
          this.article = res.article
          this.isBuy = res.isBuy
          this.fromCommentData.teacherId = this.article.teacherId
          this.article.timeDiffS = commonUtil.changeTime(this.article.gmtCreate)
          this.qqShareUrl = `https://connect.qq.com/widget/shareqq/index.html?url=https%3A%2F%2Fedu.zsrey.cn%2Farticle%2F${this.article.id}&title=${this.article.title}&summary=${this.article.title}&pics=${this.article.coverImage}&site=在线教育`
          this.weiboShareUrl = `https://service.weibo.com/share/share.php?url=https%3A%2F%2Fedu.zsrey.cn%2Farticle%2F${this.article.id}&title=${this.article.title}&pic=${this.article.coverImage}`
        })
      },
      toPay(){
          order.createOrder(this.$enum.COURSE_TYPE.ARTICLE.value,this.articleId).then(response => {
            console.log(response)
            if (response) {
              //订单创建成功，跳转到订单页面
              this.$router.push({path: `/order/${response}` })
            }
          })
        // this.$message.info("暂未开发")
      }
    }
  }
</script>
<style scoped>
  /*文字背景色*/
  .u-content::selection{
    color: #fff;
    background: #088;
  }
  /*火狐61之前得添加-moz-前缀*/
  .u-content::-moz-selection {
    color:#fff;
    background:#088;
  }
  .hidden-article{
    max-height: 750px;overflow-y: hidden
  }
  .try-end-fold-page {
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    padding-bottom: 50px;
    bottom: 0;
    z-index: 140;
    width: 100%;
    background-image: -webkit-linear-gradient(90deg, #fff, hsla(0, 0%, 100%, .99), hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, 0));
  }
  .lock-content{
    margin-top: 140px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .lock-icon{
    margin: 10px 0;
    font-weight: 900;
    color: #00aafc;
  }
  .lock-text {
    display: inline-block;
    width: 167px;
    height: 40px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    border-radius: 20px;
    border: 1px solid #00aafc;
    font-size: 14px;
    font-weight: 500;
    color: #00aafc;
    line-height: 40px;
    text-align: center;
    position: relative;
  }

  .lock-text:hover {
    background: rgba(252, 170, 252, 0.1);
  }
</style>
